import AboutImage from '@/desktop/assets/about.png'
import { useStreams } from '@/lib/utils'
import services from '@/services'

export default function About() {
  const [versions] = useStreams(services.appInfo.versions$)
  return <div css={aboutStyle}>
    <h1>
      集约运营平台
      <span className="version">{versions.ui}</span>
    </h1>
    <img src={AboutImage} />
    <h2>深圳圳联智能信息技术有限公司</h2>
    <div className="copyright">版权所有</div>
  </div>
}

const aboutStyle = css`
  h1 {
    font-size: 20px;
    margin-bottom: 30px;
  }
  .version {
    color: #777;
    font-size: 14px;
    font-weight: normal;
    margin-left: 20px;
  }
  img {
    display: block;
    margin: 20px 15px;
    width: 230px;
  }
  h2 {
    color: #316de6;
    font-size: 28px;
    letter-spacing: 1px;
    margin: 0 0 0 16px;
    opacity: 0.9;
  }
  .copyright {
    color: #333;
    font-size: 14px;
    margin-top: 40px;
  }
`
